<template>
  <div>
    <el-table
      :data="pageData.list"
      :show-header="false"
      style="width: 100%">
      <el-table-column
        prop="code_1"
        label="码">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openTraceWin(scope.row.code_1)">追溯</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="code_2"
        label="码">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openTraceWin(scope.row.code_2)">追溯</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px;text-align: right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageData.total">
      </el-pagination>
    </div>


    <el-dialog
      :title="dialog.trace.title"
      :visible.sync="dialog.trace.visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="custom-dialog"
      :destroy-on-close="true"
      :append-to-body="true"
      :body-style="{ maxHeight: 'calc(100vh - 210px)', overflow: 'auto' }"
      width="30%">
      <span>
        <ProductTrace v-if="dialog.trace.visible" :is-search="false" :code="traceForm.code"></ProductTrace>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button class="custom-btn-cancel" @click="dialog.trace.visible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getRecords} from "../request/Api";
import {Message} from "element-ui";
import ProductTrace from "./ProductTrace.vue";

export default {
  name: 'Products',
  components: {ProductTrace},
  props: {
    id: {
      type: String,
      default: function () {
        return "";
      }
    },
    beginTime: {
      type: String,
      default: function () {
        return "";
      }
    },
    endTime: {
      type: String,
      default: function () {
        return "";
      }
    },
  },
  data () {
    return {
      searchForm: {
        pageSize: 20,
        half: 10,
        pageNum: 1,
        id: null,
        beginTime: null,
        endTime: null
      },
      pageData: {
        total: 0,
        list: []
      },
      traceForm: {
        code: null
      },
      dialog: {
        trace: {
          title: "追溯",
          visible: false
        }
      }
    }
  },
  created() {
    if (this.beginTime) {
      this.searchForm.beginTime = this.beginTime + " 00:00:00";
    }
    if (this.beginTime) {
      this.searchForm.endTime = this.endTime + " 23:59:59";
    }
    this.searchForm.id = this.id;
    this.initDatas();
  },
  mounted() {

  },
  methods: {
    openTraceWin(code) {
      this.traceForm.code = code;
      this.dialog.trace.visible = true;
    },
    initDatas() {
      this.getDataList();
    },
    getDataList() {
      getRecords({
        id: this.searchForm.id,
        beginTime: this.searchForm.beginTime,
        endTime: this.searchForm.endTime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize
      }).then(res => {
        if (res.code == 0) {
          this.pageData.total = res.data.total;
          let records = [];
          for (let i = 0; i < res.data.records.length; i++) {
            let codes = {code_1: res.data.records[i].code}
            if (i + 1 < res.data.records.length) {
              codes.code_2 = res.data.records[i+1].code;
              i++;
            }
            records.push(codes);
          }
          console.log(records);
          this.pageData.list = records;
        } else {
          Message.error(res.msg);
        }
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchForm.pageNum = 1;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getDataList();
    }
  },
  beforeDestroy() {

  }
}
</script>

<style scoped>

</style>
